<!--
 * @Descripttion:
 * @Author: zhangziyu
 * @Date: 2022-11-05 18:00:56
 * @LastEditors: cuiyingchun
 * @LastEditTime: 2022-11-06 01:04:01
 * @Introduce: 专家风采 view
-->
<template>
  <div class="content">
    <el-breadcrumb separator="/" class="mb20">
      <el-breadcrumb-item :to="{ path: '/' }"><span class="gray"><i class="el-icon-s-home"></i>首页</span></el-breadcrumb-item>
      <el-breadcrumb-item><span class="green">专家详情</span></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="expertView">
      <div class="viewfl">
        <div class="vImgbox" :style="{'backgroundImage':'url('+bg+')'}"><img :src="dataObj.publicityPhotos" alt="" srcset="" class="viewimg"/></div>
        <div class="adbox">
          <p class="p1">专家媒体</p>
          <p class="p2">扫码关注获取更多信息</p>
          <el-row class="row">
            <el-col class="col" :span="12">
              <img :src="dataObj.wxgzh" alt="" srcset="" class="qr"/>
              <span>公众号</span>
            </el-col>
            <el-col class="col" :span="12">
              <img :src="dataObj.wxsph" alt="" srcset="" class="qr"/>
              <span>视频号</span>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="viewfr">
        <h3 class="name">{{dataObj.expertName}}</h3>
        <h4 class="intro">擅长领域：{{dataObj.field}}</h4>
        <div class="cont" v-html="dataObj.introduce">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { dataJson } from './data'
export default {
  data () {
    return {
      bg: require('../../assets/img/rect.png'),
      dataObj: {},
      dataJson,
      id: ''
    }
  },
  mounted () {
    window.scrollTo(0, 0)
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.id = this.$route.query.id
      this.getDataList()
    },
    getDataList () {
      this.$http.get(`/xnkt/tbexpert/getExpertInfo/${this.id}`).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.dataObj = {
          ...this.dataObj,
          ...res.data
        }
      }).catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
.content{
  width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
  .mb20{margin-bottom: 20px;}
  .gray{color: #C2C6CC;}
  .green{
    color:#2b970d;
  }
}
.expertView{
  overflow: hidden;
  .viewfl{
    width: 300px;
    float: left;
    margin-right: 20px;
    .vImgbox{
      background-repeat:  no-repeat;
      background-position: bottom;
      background-size:contain;
    }
    .viewimg{
      width: 100%;
      height: 316px;
      display: block;
      margin-bottom: 20px;
    }
    .adbox{
      width: 100%;
      border: 1px solid #eee;
      .p1{
        padding: 15px;
        margin: 0;
        border-bottom: 1px solid #eee;
        font-weight: bold;
      }
      .p2{
        text-align: center;
        padding: 10px;
      }
      .row{
        padding-bottom: 30px;
      }
      .col{
        text-align: center;
        padding: 10px;
        .qr{
          width: 90px;
          height: 90px;
          display: block;
          margin: 0 auto 10px;
        }
      }
    }
  }
  .viewfr{
    width: 850px;
    float: left;
    .name{}
    .intro{
      font-size: 14px;
      font-weight: normal;
    }
    .cont{
      line-height: 2;
      font-size: 15px;
      color: rgb(155, 155, 155);
    }
  }
}
</style>
